<template>
  <div class="login">
    <div class="login-body">
      <img src="../assets/logo@2x.png" class="logo">
      <h1>雅思真题和模拟考试平台</h1>
      <div class="p167-permit-form1">
        <input type="text" placeholder="请输入手机号" v-model="tel">
      </div>
      <div class="p167-bind-btn" @click="login" v-loading="loading">进入系统</div>
      <div>注：如果您还不能进入系统，请联系优能考老师开通系统权限。</div>
    </div>
    <div class="p167-footer">
      <p>Copyright © 2011-2020 版权所有：优能考</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tel: '',
        loading: false
      }
    },
    methods: {
      login() {
        localStorage.clear();
        if (!this.tel) {
          this.$message.warning('请填写手机号！');
          return false;
        }
        this.loading = true;
        this.$post('/api/user/mock_login', this.tel)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.$message.success(res.message);
              localStorage.token = res.data.token;
              localStorage.userInfo = JSON.stringify(res.data);
              this.$router.push('/index');
            } else {
              this.$message.warning(res.message);
            }
          }).catch(err => {
            this.loading = false;
            this.$message.warning(err);
          })
        // this.$router.push('/index');
      }
    }
  }

</script>

<style lang="less" scoped>
  .login {
    .login-body {
      width: 438px;
      margin: 80px auto 310px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 4px;
      padding: 10px 40px 36px 40px;
      margin-bottom: 0;
      position: relative;

      .logo {
        width: 150px;
        display: block;
        margin: 0 auto;
      }

      h1 {
        font-size: 20px;
        color: #383838;
        text-align: center;
        margin: 0px 0 40px 0;
      }

      .p167-permit-form1 {
        background: #fafafa;
        border: 1px solid #ebebeb;
        border-radius: 2px;
        padding: 0 20px;
        margin: 0 auto;

        input {
          display: block;
          border: none;
          outline: none;
          height: 58px;
          line-height: 58px;
          padding-left: 3px;
          background: #fafafa;
          width: 100%;
        }
      }

      .p167-bind-btn {
        background: #18c787;
        color: #fff;
        text-align: center;
        line-height: 48px;
        border: 1px solid #15ad75;
        border-radius: 2px;
        font-size: 18px;
        margin: 20px 0;
        display: block;
        cursor: pointer;
      }

    }

    .p167-footer {
      margin: 0 auto;
      padding: 30px 0;
      position: relative;
      width: 100%;
      bottom: 0;

      p {
        color: #ccc;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
      }
    }
  }

</style>
